import { Card } from 'antd';
import React from 'react';

interface Props {
  children: React.ReactNode;
  title?: string;
  extra?: React.ReactNode;
}

const MyCard: React.FC<Props> = (props) => {
  const { children, title, extra } = props;

  return (
    <Card
      variant={'borderless'}
      title={<span className={'text-xl relative font-normal z-10'}>{title}</span>}
      extra={<div className={'z-10 relative'}>{extra}</div>}
    >
      <div
        className={`rounded-lg w-full absolute top-0 left-0 bg-gradient-to-b from-[#BFE6FF] to-white border-none`}
        style={{ height: '80px' }}
      />
      {children}
    </Card>
  );
};

export default MyCard;
